<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <!-- 头部 -->
    <header class="header">
      <!-- navbar -->
      <nav class="navbar">
        <div class="left">
          <a href="#">
            <i class="iconfont Navbar_logo"></i>
          </a>
        </div>
        <div class="right">
          <a href="#" class="iconfont ic_search_tab"></a>
          <a href="#" class="login">
          </a>
          <a href="#" class="download">
          </a>
        </div>
      </nav>

      <!-- 菜单 menu -->
      <div class="menu">
        <div class="tab">
          <ul>
            <li class="active"><a href="#">首页</a></li>
            <li><a href="#">动画</a></li>
            <li><a href="#">番剧</a></li>
            <li><a href="#">国创</a></li>
            <li><a href="#">音乐</a></li>
            <li><a href="#">舞蹈</a></li>
          </ul>
        </div>
        <a href="#" class="more">
          <i class="iconfont general_pulldown_s"></i>
        </a>
      </div>
    </header>
    <!-- main -->
     <div class="main">
        <a href="#" class="video-item">
            <div class="card">
                <img src="./images/3.webp" alt="">
                <div class="count">
                    <p>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        <span>132</span>万
                    </p>
                    <p>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        <span>2.4</span>万
                    </p>
                </div>
            </div>
            <p class="title ellipsis-2">“大叔的支持率已经超过大妈啦！”</p>
        </a>
        <a href="#" class="video-item">
            <div class="card">
                <img src="./images/4.webp" alt="">
                <div class="count">
                    <p>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        <span>132</span>万
                    </p>
                    <p>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        <span>2.4</span>万
                    </p>
                </div>
            </div>
            <p class="title ellipsis-2">怎样的成就才能配得上这一路的颠沛流离</p>
        </a>
        <a href="#" class="video-item">
            <div class="card">
                <img src="./images/5.webp" alt="">
                <div class="count">
                    <p>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        <span>132</span>万
                    </p>
                    <p>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        <span>2.4</span>万
                    </p>
                </div>
            </div>
            <p class="title ellipsis-2">美利坚，你们的皇帝回来了</p>
        </a>
        <a href="#" class="video-item">
            <div class="card">
                <img src="./images/6.webp" alt="">
                <div class="count">
                    <p>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        <span>132</span>万
                    </p>
                    <p>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        <span>2.4</span>万
                    </p>
                </div>
            </div>
            <p class="title ellipsis-2">耳机一戴 ⚡️ 孤独不再</p>
        </a>
        <a href="#" class="video-item">
            <div class="card">
                <img src="./images/7.webp" alt="">
                <div class="count">
                    <p>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        <span>132</span>万
                    </p>
                    <p>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        <span>2.4</span>万
                    </p>
                </div>
            </div>
            <p class="title ellipsis-2">穗：你昨天肇事逃逸了对吧</p>
        </a>
        <a href="#" class="video-item">
            <div class="card">
                <img src="./images/8.webp" alt="">
                <div class="count">
                    <p>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        <span>132</span>万
                    </p>
                    <p>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        <span>2.4</span>万
                    </p>
                </div>
            </div>
            <p class="title ellipsis-2">前方超燃！德国钢琴家武汉街头炸响《黑神话悟空》《云宫迅音》</p>
        </a>
        <a href="#" class="video-item">
            <div class="card">
                <img src="./images/9.webp" alt="">
                <div class="count">
                    <p>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        <span>132</span>万
                    </p>
                    <p>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        <span>2.4</span>万
                    </p>
                </div>
            </div>
            <p class="title ellipsis-2">至高无上的懂王陛下于今日抵达自己忠诚的美帝</p>
        </a>
        <a href="#" class="video-item">
            <div class="card">
                <img src="./images/10.webp" alt="">
                <div class="count">
                    <p>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        <span>132</span>万
                    </p>
                    <p>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        <span>2.4</span>万
                    </p>
                </div>
            </div>
            <p class="title ellipsis-2">我是埃文凯尔，我终于可以来中国了。</p>
        </a>
        <a href="#" class="video-item">
            <div class="card">
                <img src="./images/3.webp" alt="">
                <div class="count">
                    <p>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        <span>132</span>万
                    </p>
                    <p>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        <span>2.4</span>万
                    </p>
                </div>
            </div>
            <p class="title ellipsis-2">“大叔的支持率已经超过大妈啦！”</p>
        </a>
        <a href="#" class="video-item">
            <div class="card">
                <img src="./images/4.webp" alt="">
                <div class="count">
                    <p>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        <span>132</span>万
                    </p>
                    <p>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        <span>2.4</span>万
                    </p>
                </div>
            </div>
            <p class="title ellipsis-2">怎样的成就才能配得上这一路的颠沛流离</p>
        </a>
        <a href="#" class="video-item">
            <div class="card">
                <img src="./images/5.webp" alt="">
                <div class="count">
                    <p>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        <span>132</span>万
                    </p>
                    <p>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        <span>2.4</span>万
                    </p>
                </div>
            </div>
            <p class="title ellipsis-2">美利坚，你们的皇帝回来了</p>
        </a>
        <a href="#" class="video-item">
            <div class="card">
                <img src="./images/6.webp" alt="">
                <div class="count">
                    <p>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        <span>132</span>万
                    </p>
                    <p>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        <span>2.4</span>万
                    </p>
                </div>
            </div>
            <p class="title ellipsis-2">耳机一戴 ⚡️ 孤独不再</p>
        </a>
        <a href="#" class="video-item">
            <div class="card">
                <img src="./images/7.webp" alt="">
                <div class="count">
                    <p>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        <span>132</span>万
                    </p>
                    <p>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        <span>2.4</span>万
                    </p>
                </div>
            </div>
            <p class="title ellipsis-2">穗：你昨天肇事逃逸了对吧</p>
        </a>
        <a href="#" class="video-item">
            <div class="card">
                <img src="./images/8.webp" alt="">
                <div class="count">
                    <p>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        <span>132</span>万
                    </p>
                    <p>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        <span>2.4</span>万
                    </p>
                </div>
            </div>
            <p class="title ellipsis-2">前方超燃！德国钢琴家武汉街头炸响《黑神话悟空》《云宫迅音》</p>
        </a>
        <a href="#" class="video-item">
            <div class="card">
                <img src="./images/9.webp" alt="">
                <div class="count">
                    <p>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        <span>132</span>万
                    </p>
                    <p>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        <span>2.4</span>万
                    </p>
                </div>
            </div>
            <p class="title ellipsis-2">至高无上的懂王陛下于今日抵达自己忠诚的美帝</p>
        </a>
        <a href="#" class="video-item">
            <div class="card">
                <img src="./images/10.webp" alt="">
                <div class="count">
                    <p>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        <span>132</span>万
                    </p>
                    <p>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        <span>2.4</span>万
                    </p>
                </div>
            </div>
            <p class="title ellipsis-2">我是埃文凯尔，我终于可以来中国了。</p>
        </a>
     </div>
     <div class="btn">
        <a href="#">
            <i class="iconfont Navbar_logo"></i>
            <span>打开App，看你感兴趣的视频</span>
        </a>
    </div>
  </body>
</html>

